/* 自定义节点样式 */
.react-flow {
    /* 自定义变量 */
    --xy-theme-selected: #F57DBD;
    --xy-theme-hover: #db2828;
    --xy-theme-edge-hover: #2e74ff;
    --xy-theme-color-focus: #E8E8E8;

    /* 节点样式 */
    --xy-node-border-default: 1px solid #EDEDED;
    --xy-node-boxshadow-default:
        0 4px 16px 0 rgba(0, 0, 0, .1);
    --xy-node-border-radius-default: 3px;
    --xy-node-background-color-default: #ffffff;
    --xy-node-color-default: #333333;
}

.react-flow__node {
    box-shadow: var(--xy-node-boxshadow-default);
    border-radius: var(--xy-node-border-radius-default);
    background-color: var(--xy-node-background-color-default);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    flex-direction: column;
    border: solid 2px transparent;
    color: var(--xy-node-color-default);
    max-width: 200px;
    min-width: 150px;
    max-height: 80px;


    &.draggable,
    &.selectable {
        cursor: pointer;
    }

    &.react-flow__node-UnionNode,
    &.react-flow__node-AggregateNode,
    &.react-flow__node-JoinNode {

        &:hover,
        &:focus,
        &.selected {
            border: solid 2px #FFA500;
        }

        .react-flow__handle {
            background-color: #FFA500;
        }
    }

    &.react-flow__node-PreprocessNode {

        &:hover,
        &:focus,
        &.selected {
            border: solid 2px #9671ff;
        }

        .react-flow__handle {
            background-color: #9671ff;
        }
    }

    &.react-flow__node-SqlNode {

        &:hover,
        &:focus,
        &.selected {
            border: solid 2px #2e74ff;
        }

        .react-flow__handle {
            background-color: #2e74ff;
        }
    }

    &.react-flow__node-SinkNode {

        &:hover,
        &:focus,
        &.selected {
            border: solid 2px #45cc67;
        }

        .react-flow__handle {
            background-color: #45cc67;
        }
    }
}

.react-flow__node.selectable:hover,
.react-flow__node.draggable:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

/* 其他样式保持不变 */
.react-flow__node-group {
    background-color: rgba(207, 182, 255, 0.4);
    border-color: #9E86ED;
}

.react-flow__edge.selectable:hover .react-flow__edge-path,
.react-flow__edge.selectable.selected .react-flow__edge-path {
    stroke: var(--xy-theme-edge-hover);
    stroke-width: 2px;
}


.react-flow__handle {
    width: 7px;
    height: 7px;
    border-radius: 0;
}

.react-flow__handle.connectionindicator:hover {
    pointer-events: all;
    border-color: var(--xy-theme-color-focus);
}

.react-flow__handle.connectionindicator:focus,
.react-flow__handle.connectingfrom,
.react-flow__handle.connectingto {
    border-color: var(--xy-theme-edge-hover);
}

.react-flow__node-resizer {
    border-radius: 0;
    border: none;
}

.custom-edge {
  .edge-label {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  &:hover {
    .edge-label {
      opacity: 1;
    }
  }
}
